<script setup lang="ts">

import img from "@/assets/img";

import {BsFileEarmarkText, BsPerson} from "vue-icons-plus/bs";
import {RiCompassDiscoverFill} from "vue-icons-plus/ri";
import {AiOutlineHome} from "vue-icons-plus/ai";
import {onMounted, ref } from "vue";

const itemCount = ref('');
onMounted(() => {
  const storeditemCount = sessionStorage.getItem('itemCount');
  if (storeditemCount) {
    itemCount.value = storeditemCount;
  }
});

const router = useRouter()
function main() {
  router.push({ name: 'main' });
}
function businessinformation() {
  router.push({ name: 'businessinformation' });
}
function myorder(){
  router.push('/myorders');
}

</script>

<template>
  <div class="w-full h-full">
    <header class="w-full h-12vw bg-#0097ff  color-#fff text-4.8vw flex justify-center items-center pos-fixed left-0 top-0 z-100">
      <p class="color-#fff text-4.8vw select-none">商家列表</p>
    </header>
    <ul class="w-full mt-12vw pb-14vw">
      <li @click="businessinformation">
        <div class="img">
          <img :src="img.sj01">
          <div class="img-quantity">{{itemCount}}</div>
        </div>
        <div class="info">
          <h3>万家饺子(软件园E18店)</h3>
          <p>&#165;15起送 | &#165;3配送</p>
          <p>各种饺子</p>
        </div>
      </li>
      <li @click="businessinformation">
        <div class="img">
          <img :src="img.sj02">
        </div>
        <div class="info">
          <h3>小锅饭豆腐馆(全运店)</h3>
          <p>&#165;15起送 | &#165;3配送</p>
          <p>各种类的豆腐</p>
        </div>
      </li>
      <li @click="businessinformation">
        <div class="img">
          <img :src="img.sj03">
        </div>
        <div class="info">
          <h3>麦当劳麦乐送(全运路店)</h3>
          <p>&#165;15起送 | &#165;3配送</p>
          <p>炸鸡汉堡</p>
        </div>
      </li>
      <li @click="businessinformation">
        <div class="img">
          <img :src="img.sj04">
        </div>
        <div class="info">
          <h3>米村拌饭(浑南店)</h3>
          <p>&#165;15起送 | &#165;3配送</p>
          <p>各式拌饭</p>
        </div>
      </li>
      <li @click="businessinformation">
        <div class="img">
          <img :src="img.sj05">
        </div>
        <div class="info">
          <h3>申记串道(中海康城店)</h3>
          <p>&#165;15起送 | &#165;3配送</p>
          <p>串串</p>
        </div>
      </li>
      <li @click="businessinformation">
        <div class="img">
          <img :src="img.sj06">
        </div>
        <div class="info">
          <h3>半亩良田排骨米饭</h3>
          <p>&#165;15起送 | &#165;3配送</p>
          <p>排骨+饭</p>
        </div>
      </li>
      <li @click="businessinformation">
        <div class="img">
          <img :src="img.sj07">
        </div>
        <div class="info">
          <h3>茶兮鲜果饮品(国际软件园店)</h3>
          <p>&#165;15起送 | &#165;3配送</p>
          <p>奶茶、果茶</p>
        </div>
      </li>
      <li @click="businessinformation">
        <div class="img">
          <img :src="img.sj08">
        </div>
        <div class="info">
          <h3>唯一水果捞(软件园E18店)</h3>
          <p>&#165;15起送 | &#165;3配送</p>
          <p>水果捞</p>
        </div>
      </li>
      <li @click="businessinformation">
        <div class="img">
          <img :src="img.sj09">
        </div>
        <div class="info">
          <h3>满园春饼(全运路店)</h3>
          <p>&#165;15起送 | &#165;3配送</p>
          <p>春饼</p>
        </div>
      </li>
    </ul>
    <ul class="footer w-full h-14vw flex items-center justify-around pos-fixed left-0 bottom-0 border-solid border-t-1px border-#DDD">
      <li @click="main">
        <AiOutlineHome></AiOutlineHome>
        <p>首页</p>
      </li>
      <li>
        <RiCompassDiscoverFill></RiCompassDiscoverFill>
        <p>发现</p>
      </li>
      <li @click="myorder">
        <BsFileEarmarkText></BsFileEarmarkText>
        <p>订单</p>
      </li>
      <li>
        <BsPerson></BsPerson>
        <p>我的</p>
      </li>
    </ul>
  </div>
</template>

<style scoped>
li{
  width: 100%;
  box-sizing: border-box;
  padding: 2.5vw;
  border-bottom: solid 1px #DDD;
  user-select: none;
  cursor: pointer;

  display: flex;
  align-items: center;
}
li .img{
  position: relative;
}
li .img img{
  width: 20vw;
  height: 20vw;
}
li .img .img-quantity{
  width: 5vw;
  height: 5vw;
  background-color: red;
  color: #fff;
  font-size: 3.6vw;
  border-radius: 2.5vw;

  display: flex;
  justify-content: center;
  align-items: center;

  position: absolute;
  right: -1.5vw;
  top: -1.5vw;
}
li .info{
  margin-left: 3vw;
}
li .info h3{
  font-size: 3.8vw;
  color: #555;
}
li .info p{
  font-size: 3vw;
  color: #888;
  margin-top: 2vw;
}

.footer{
  width: 100%;
  height: 14vw;
  border-top: solid 1px #DDD;
  background-color: #fff;

  position: fixed;
  left: 0;
  bottom: 0;

  display: flex;
  justify-content: space-around;
  align-items: center;
}
.footer li{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  color: #999;
  user-select: none;
  cursor: pointer;
}
.footer li p{
  font-size: 2.8vw;
}
.footer li i{
  font-size: 5vw;
}
</style>